<template>
  <div id="SellBuy">
    <Row :gutter="10" class="Row">
      <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="item">
        <router-link to="/BuyCar">
          <img src="../../../static/m_img/h_m.png" alt>
        </router-link>
      </Col>
      <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="item">
        <a href="javascript:void(0)" @click="handleDialog()">
          <img src="../../../static/m_img/h_c.png" alt>
        </a>
      </Col>
    </Row>
    <Dialog
      :visible.sync="dialogVisible"
      :lock-scroll="false"
      width="90%"
      :before-close="handleClose"
    >
      <h3 class="dialog-title">
        已服务了
        <span>{{total_count}}</span> 位车主
        <p>全国比价 给您一个满意价</p>
      </h3>
      <mu-form ref="form" :model="form" class="mu-demo-form">
        <div class="selectBox clearfix">
          <img src="../../../static/m_img/t_pp.png" alt>
          <mu-form-item label="车辆品牌" prop="carSerieFrom" :rules="brandFormRules">
            <mu-text-field
              v-model="form.carSerieFrom"
              prop="carSerieFrom"
              placeholder="请选择您的车辆品牌"
              readonly
            ></mu-text-field>
            <span class="select" @click="handleBrandShow">选择</span>
          </mu-form-item>
        </div>
        <div class="selectBox clearfix">
          <img src="../../../static/m_img/t_dw.png" alt>
          <mu-form-item label="车辆所在地" prop="cityFrom" :rules="cityFromRules">
            <mu-text-field
              type="text"
              v-model="form.cityFrom"
              prop="cityFrom"
              placeholder="请选择您的车辆所在地"
              readonly
            ></mu-text-field>
            <span class="select" @click="handleCityShow">选择</span>
          </mu-form-item>
        </div>
        <div class="selectBox clearfix">
          <img src="../../../static/m_img/t_sj.png" alt>
          <mu-form-item label="手机号码" prop="phone" :rules="phoneRules">
            <mu-text-field
              type="text"
              v-model="form.phone"
              prop="phone"
              placeholder="请填写您的手机号"
              max-length="11"
              @keyup.native="changePhone"
            ></mu-text-field>
          </mu-form-item>
        </div>
        <mu-form-item>
          <mu-button
            @click="submitForm"
            class="sumbButton"
            :style="{'background':'linear-gradient(0deg,rgba(63,167,255,1),rgba(3,204,249,1))','color': '#fff'}"
            full-width
          >快速卖车</mu-button>
        </mu-form-item>
      </mu-form>
    </Dialog>
    <v-city
      :cityShow="cityShow"
      :title="title"
      ref="cityList"
      v-on:listenToChildEvent="showmsgformchild"
    ></v-city>
    <v-brandSelect
      :brandShow="brandShow"
      v-on:listenToBrand="brandInfo"
      ref="brandList"
    ></v-brandSelect>
  </div>
</template>
<script>
import { Row, Col } from "element-ui";
import { postReq2, getReq } from "../../assets/js/api";
import { errorRes, checkVal } from "../../assets/js/check";
import vCity from "../common/City";
import vBrandSelect from "../common/BrandSelect";
import {
  Dialog,
  Button,
  Form,
  Input,
  FormItem,
  Select,
  Option,
  MessageBox,
  DatePicker
} from "element-ui";
export default {
  data() {
    var phoneReg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    return {
      brandShow: false,
      title: "选择车辆所在地",
      cityShow: false,
      total_count: 85925,
      dialogVisible: false,
      form: {
        phone: "",
        provinceFrom: "",
        cityFrom: "",
        brandForm: "",
        brandFormId: "",
        carSerieFrom: "",
        carSerieFromId: "",
        carModelFrom: "",
        carModelFromId: ""
      },
      provinces: [],
      citys: [],
      brands: [],
      carSeries: [],
      carModels: [],
      brandFormRules: [{ validate: val => !!val, message: "必须填写车辆品牌" }],
      cityFromRules: [
        { validate: val => !!val, message: "必须填写车辆所在地" }
      ],
      phoneRules: [
        { validate: val => !!val, message: "必须填写手机号码" },
        { validate: val => phoneReg.test(val), message: "请填写正确的手机号码" }
      ]
    };
  },
  components: {
    Dialog,
    Form,
    Input,
    Button,
    FormItem,
    MessageBox,
    Row,
    Col,
    vCity,
    vBrandSelect
  },
  methods: {
    // 关闭弹框
    handleClose(done) {
      this.dialogVisible = false;
      this.move();
    },
    // 打开弹框
    handleDialog() {
      this.dialogVisible = true;
      this.stop();
    },
    // 获取申请人数
    getInfo() {
      getReq("/web/getApplySellNum").then(res => {
        let { errcode, message, content } = res;
        if (errcode == 0) {
          this.total_count = content.num + this.total_count;
        }
      });
    },
    // 限制只能输入数字
    changePhone(e) {
      this.form.phone = e.target.value.replace(/[^0-9]/g, "");
    },
    changeMileage(e) {
      var reg = /((^[1-9]{0,1}[0-9]{1})*$)|((^[0-9]{0,2})*\.([0-9]{0,2})$)/;
      e.target.value = e.target.value.match(reg)[0] || null;
    },
    // 打开选择城市列表
    handleCityShow() {
      this.cityShow = true;
    },
    handleBrandShow() {
      this.brandShow = true;
    },
    // 城市选择完之后的操作
    showmsgformchild: function(data) {
      this.cityShow = data;
      if (this.$refs.cityList.curCityName == "") {
        this.form.cityFrom = this.$refs.cityList.curProvinceName;
        this.form.provinceFrom = this.$refs.cityList.curProvinceName;
      } else {
        this.form.cityFrom = this.$refs.cityList.curCityName;
        this.form.provinceFrom = this.$refs.cityList.curProvinceName;
      }
    },
    // 选择品牌之后的操作
    brandInfo(data) {
      this.brandShow = data;
      this.form.brandForm = this.$refs.brandList.curBrandName;
      this.form.brandFormId = this.$refs.brandList.curBrandId;
      this.form.carSerieFrom = this.$refs.brandList.curSriesdName;
      this.form.carSerieFromId = this.$refs.brandList.curSriesdId;
      this.form.carModelFrom = this.$refs.brandList.curModeldName;
      this.form.carModelFromId = this.$refs.brandList.curModeldId;
    },
    //禁止滚动
    stop() {
      var mo = function(e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", mo, false); //禁止页面滑动
    },
    /***取消滑动限制***/
    move() {
      var mo = function(e) {
        e.preventDefault();
      };
      document.body.style.overflow = ""; //出现滚动条
      document.removeEventListener("touchmove", mo, false);
    },
    // 提交信息
    submitForm() {
      var that = this;
      this.$refs.form.validate().then(valid => {
        if (valid) {
          let params = {
            cityName: that.form.cityFrom,
            provinceName: that.form.provinceFrom,
            phone: that.form.phone,
            brandId: that.form.brandFormId,
            brandName: that.form.brandForm,
            seriesId: that.form.carSerieFromId,
            seriesName: that.form.carSerieFrom,
            modelId: that.form.carModelFromId,
            modelName: that.form.carModelFrom
          };
          postReq2("/web/saveApplySell", params).then(res => {
            let { errcode, message, content } = res;
            let c = this.total_count + 1;
            if (errcode == 0) {
              MessageBox.alert(
                "恭喜您成为我们服务的第" + c + "位车主",
                "提示",
                {
                  confirmButtonText: "确定",
                  callback: action => {
                    this.$nextTick(() => {
                      this.total_count = c;
                    });
                  }
                }
              );
            } else {
              errorRes(errcode, message);
            }
          });
          // this.$refs["form"].resetFields();
          that.dialogVisible = false;
          this.move();
        } else {
          return false;
        }
      });
    },
     getArea() {
       this.form.cityFrom  = getCookie("cityDw");
      this.form.provinceFrom = getCookie("provinceDw");
    }
  },
  mounted() {
    this.getArea();
    this.getInfo();
  }
};
</script>
<style  lang='scss'>
#SellBuy {
  // height: 56px;
  display: flex;
  justify-content: space-between;
  padding: 5px 15px;
  align-items: center;
  .Row {
    width: 100%;
  }
  a {
    // width: 167.5px;
    width: 100%;
  }
  img {
    width: 100%;
  }
  .el-dialog {
    background: url(../../../static/m_img/t_bg.png) center 0 no-repeat #fff;
    background-size: 100% auto;
    border-radius: 15px;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .dialog-title {
      text-align: center;
      color: #0098ff;
      font-size: 1.416667rem;
      font-weight: bold;
      font-family: PingFang-SC-Bold;
      span {
        font-size: 1.916667rem;
        color: #ff9800;
      }
      p {
        font-family: PingFang-SC-Medium;
        color: #ff9800;
        font-weight: normal;
      }
    }
  }
  .mu-demo-form {
    margin-top: 20%;
  }
  .el-dialog__headerbtn {
    bottom: -8%;
    left: 45%;
    top: auto;
    border: 1px solid #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    .el-dialog__close {
      color: #fff;
      font-size: 1.666667rem;
    }
  }

  .selectBox {
    // display: flex;
    img {
      width: 25px;
      height: 25px;
      float: left;
      margin-top: 25px;
    }
    .mu-form-item {
    }
    .mu-form-item__has-label {
      float: left;
      width: 80%;
      margin-left: 5%;
    }
    .mu-form-item-label {
      color: #323232;
      font-size: 1.25rem;
      font-weight: bold;
    }
    .mu-text-field-input {
      font-size: 1rem;
      color: #666;
      height: 26px;
    }
    .mu-form-item .mu-button {
      width: 100%;
    }
    .mu-form-item {
      position: relative;
    }
    .select {
      color: #0098ff;
      font-size: 1.083333rem;
      border: 1px solid rgba(63, 167, 255, 1);
      padding: 2px 4px;
      line-height: 14px;
      position: absolute;
      top: 50%;
      right: 0;
    }
    .mu-raised-button {
      box-shadow: 0px 10px 10px 0px rgba(78, 173, 254, 0.47),
        0px 2px 0px 0px rgba(222, 251, 252, 0.75);
    }
    .sumbButton {
      border-radius: 6px;
    }
  }
}
.el-message-box {
  width: 80%;
}
</style>
